import React from "react";
import {withRouter} from 'react-router-dom'
import LocalStorageService from "../../utils/LocalStorageService";
import {getFuliDetailReq, getHeatRankReq, getUserDetailReq, getVoteDataReq} from "../../apis/goApis";
import {log} from "../../utils/commonfunc";
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout";
import './fuli.css'
import defaultAvartarSrc from '../../res/images/web/together/我的碎片@2x.png'
import arrowSrc from '../../res/images/web/together/箭头／右进@2x.png'
import whatSrc from '../../res/images/web/together/what@2x.png'
import puzzleSrc from '../../res/images/web/together/我的碎片-小拼图@2x.png'

import CustomBotton from "../../shared-components/CustomButton/CustomBotton";
import {Modal} from "antd-mobile";
import FuliRuleModal from "./RuleModal";
class FuliContainer extends React.Component {
    constructor(props) {
        super(props)
        this.matchId = this.props.match.params.gameId
        this.uid = LocalStorageService.get('userid')
        const fuliInterface = {
            Heat: 0,
            Maxheat: 0,
            Photourl: [
                ['', '', '', '', '', ''],
                ['', '', '', '', '', ''],
                ['', '',],
                ['', '', '', '', '', ''],
            ],

        }
        this.state = {
            userDetail: null,
            heat: 0,
            myHeat: 0,
            fakeheat: [0, 0,],
            fulis: [fuliInterface, fuliInterface, fuliInterface,],
            lightIndex: -1,
            heatRanks: [],
            rankPageIndex: 0,
            rankEnd: false,
            myRank: -1,
            modalRule: false,
        }
    }

    componentDidMount() {
        this.getUserDetail()
            .then(() => this.getFuliDetail())
            .then(() => this.getHeatRanksDetail())
    }

    getUserDetail() {
        return getUserDetailReq({
            uid: this.uid
        }, false).then(resp => {

            this.setState({
                userDetail: resp.data.ok,
            })
        })
    }

    getFuliDetail() {
        return getFuliDetailReq({
            Namiid: parseInt(this.matchId),
            Uid: this.uid,
        }).then(resp => {
            log("resp", resp)
            this.setState({
                fulis: resp.data.fuliinfo,
                lightIndex: resp.data.fulilight,
                heat: resp.data.heat,
                myRank: resp.data.rank,
                fakeheat: resp.data.fakeheat,
                myHeat: resp.data.myheat,
            })
        })
    }

    getHeatRanksDetail() {
        getHeatRankReq({
            Namiid: parseInt(this.matchId),
            P: this.state.rankPageIndex,
        }).then((res) => {
            log("res", res)
            let end = false
            if (res.data.ok < 10) {
                end = true
            }
            this.setState({
                heatRanks: [...this.state.heatRanks, ...res.data.ok,],
                rankEnd: end,
            })
        })
    }

    callRuleModal = () => {
        this.setState({modalRule: true,})
    }

    render() {

        const user = this.state.userDetail
        const history = this.props.history
        const avatarSrc = user?.Iconurl || defaultAvartarSrc
        const fulis = this.state.fulis
        const heat = this.state.heat
        const lightIndex = this.state.lightIndex
        const rank = this.state.heatRanks
        const myRank = this.state.myRank

        return <GoBackLayout
            mainTitle='福利'
            history={history}
        >
            <FuliRuleModal
                visible={this.state.modalRule}
                onClose={() => this.setState({modalRule: false,})}
            />

            <div className='fuli-header-container'>
                
                <div className='flex-space-between-align-center'>
                    <div className='flex-align-center' style={{position: 'relative',}} onClick={() => this.props.history.push('../my-fuli')}>
                        <img alt='' src={avatarSrc} style={{width: 40, height: 40, borderRadius: '50%',}}/>
                        <span className='my-text-link'>我的碎片</span>
                        <img alt='' src={arrowSrc} style={{width: 5, height: 8,}}/>
                        <img alt='' src={puzzleSrc} style={{width: 16, height: 16, position: 'absolute', top: 0, left: 30,}}/>
                    </div>
                    <CustomBotton size='small' extrastyle={{background: '#FFA500', height: '28px', width: '60px', borderRadius: '14px',}} onClick={this.callRuleModal}>
                        <div className='flex-center-align-center' style={{margin: '0 auto',}} >
                            <img src={whatSrc} alt="" style={{width: 13, height: 13, marginRight: '4px',}}/>
                            <span style={{lineHeight: '28px',}}>规则</span>
                        </div>
                    </CustomBotton>
                </div>

            </div>

            <div className='flex fulis-container mg-b-8px'>
                {fulis.map((fuli, index) => {

                    let fuliLighted = index <= lightIndex
                    if (heat < 1000) fuliLighted = false
                    const url = fuliLighted ? fuli.Photourl[2][1] : fuli.Photourl[2][0]
                    const fuliStyle = {
                        minWidth: 320,
                        minHeight: 213,
                        background: `no-repeat url(${url}) 50% 50%/cover`,
                    }
                    const lighted = <div style={fuliStyle} className='fuli-item-card'/>
                    const normal = <div style={fuliStyle} className='fuli-item-card'/>
                    const card = fuliLighted ? lighted : normal

                    let prevHeat = 0
                    if (index > 0) {
                        prevHeat = fuli.Heat
                    }
                    const total = fuli.Maxheat - prevHeat
                    const heatLength = heat - prevHeat > 0 ? heat - prevHeat : 0
                    const past = heatLength > 1000
                    let totalLength = 320
                    const isLast =  index === fulis.length - 1
                    if (isLast) {
                        totalLength = totalLength - 12
                    }
                    let curLength = totalLength * (heatLength / total) > totalLength ? totalLength : totalLength * (heatLength / total)
                    if (heat < 1000) {
                        curLength = 0
                    }
                    let max = fuli.Maxheat
                    if (index === 0) {
                        const fake = this.state.fakeheat
                        max += fake[0]
                        max += fake[1]
                    }
                    const heatTemplate = <div
                        className='fuli-item-heat'
                    >
                        <div className={past ? 'fuli-item-heat-dot fuli-item-heat-dot-past' : 'fuli-item-heat-dot'}/>
                        <div className='fuli-item-heat-bg'/>
                        <div className='fuli-item-heat-cur' style={{width: curLength ? curLength : 0}}/>
                    </div>

                    const lv = <div className='fuli-item-lv flex-align-center'>
                        <span className='fuli-item-lv-mark' style={{background: curLength === 0 ? '#A4A4A4' : '',}}>
                            Lv.{index + 1}
                        </span>
                        <span>
                            {/*{index === 0 ? `当前热力值：${heat}` : `满级热力值：${fuli.Upgradeheat}`}*/}
                            {`满级热力值：${max}`}
                        </span>
                        {index === 0 && heat < 1000 && <span className='gray-text mg-l-4px'>
                            差{1000 - heat}可激活
                        </span>}
                    </div>

                    return <div className='fuli-item' key={index}>
                        {card}
                        {heatTemplate}
                        {lv}
                    </div>
                })}
            </div>

            <div className='pd-16-px bg-white'>
                <p className='bold text-align-center mg-b-12px'>热度排行榜</p>
                <div className='heat-rank-container'>
                    <div className='flex-space-between'>
                        <span className='gray-text'>排名</span>
                        <span className='gray-text'>贡献热度值</span>
                    </div>
                    <div>
                        {rank.map((user, index) => {
                            const avatarSrc = user?.Iconurl || defaultAvartarSrc

                            return <div key={index} className='flex-space-between-align-center heat-rank'>
                                <div className='flex-align-center heat-rank-item'>
                                    <span className='heat-rank-item-rank'>
                                        {index + 1}
                                    </span>
                                    <img alt='' src={avatarSrc} style={{width: 28, height: 28, borderRadius: '50%', marginRight: '20px',}}/>
                                    <span>{user.Nickname}</span>
                                </div>
                                <span className='heat-rank-item-heat'>
                                    {user.Supports + user.Supportske}
                                </span>
                            </div>
                        })}
                    </div>
                </div>

                {myRank > -1 && <div className='my-rank-item flex-space-between-align-center'>
                    <div className='flex-align-center'>
                        <span className='heat-rank-item-rank' style={{color: '#FFC863'}}>
                            {this.state.myRank + 1}
                        </span>
                        <img
                            alt=''
                            src={avatarSrc}
                            style={{width: 28, height: 28, borderRadius: '50%', marginRight: '20px',}}
                        />
                        <span className='text-align-right' style={{color: '#fff',}}>
                            {this.state.userDetail?.Nickname}
                        </span>
                    </div>

                    <span className='text-align-right' style={{color: '#fff',}}>
                        {this.state.myHeat}
                    </span>
                </div>}
            </div>

        </GoBackLayout>
    }
}

export default withRouter(FuliContainer)